<template>
  <div id="drag-list">
    <div v-for="it in dragContent" :key="it.id"  :dragstart="dragStart" >
      <div class="dragger" draggable="true"  @mousedown="(e) => getMouseCoord(e, it)">
        <span>wenzi </span>
        <p>{{ it.title }}</p>
      </div>
    </div>

  </div>
</template>

<script>
import { dragContent } from "./config";
export default {
  name: "DragList",
  data() {
    return {
      dragContent,
    };
  },
  methods:{
    dragStart(e) {
      // console.log(e)
    },
    getMouseCoord(e,it) {
      this.$bus.$emit('getMouseCoord',[e.offsetX, e.offsetY,it])
    }
  }
};
</script>

<style lang="scss" scoped>
#drag-list {
  overflow: auto;
  background-color: rgb(80, 80, 80);
  color: #fff;
  .dragger {
    padding: 10px;
    line-height: 50px;
    display: flex;
    border-bottom: 1px dashed;
    span {
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      padding: 0px 10px;
    }
    p {
      text-align: center;
      flex: 1;
    }
  }
}
</style>